<template>
	<view class="login-container" :data-theme="theme()" :class="theme() || ''">
		<!-- <view class="wechatapp">
			<image class="logo-image" :src="setting.loginLogo || '/static/login-default.png'"></image>
			<view class="d-c-c f30 gray3">{{ setting.name }}</view>
		</view> -->
		<!-- <view class="auth-title fb">{{ setting.loginDesc }}</view> -->
		<!-- <view class="auth-subtitle">授权绑定手机号 为您提供更好的服务</view> -->


		<!-- 模糊背景层 -->
		<view class="blur-bg"></view>


		<view class="d-s-s f48 black mt50">{{ setting.name }}</view>


		<view class="black f34 mt60" style="font-weight: 500;">一键登录</view>
		<view class="line-red"></view>


		<view class="gray9 f28 mt60">本机号码登录</view>

		<view class="f52 black mt30" style="font-weight: 500;">183****6930</view>
		<!-- class="dominant"  -->
		<view @click="isRead = !isRead" class="d-s-s gray6" style="margin-top: 184rpx;">
			<image style="width: 36rpx;height: 36rpx;margin-right: 10rpx;" v-if="isRead" :src="agreeUrl"></image>
			<image style="width: 36rpx;height: 36rpx;margin-right: 10rpx;" v-else :src="noagreeUrl"></image>
			
			<!-- <view class="icon iconfont icon-tijiaochenggong" :class="isRead ? 'active agreement' : 'agreement'"></view> -->
			我已阅读<text class="xieyi-left-right" @click="xieyi('service')"> 用户手册 </text>和<text class="xieyi-left-right"
				@click="xieyi('privacy')"> 隐私政策 </text>
		</view>


		<view class="login-btn mt60">
			<!-- #ifdef MP-WEIXIN -->

			<template v-if="!mobile">
				<button v-if="wxPhone" class="btn-bg-red" open-type="getPhoneNumber" @getphonenumber="getUserInfo">
					一键登录/注册
				</button>
				<button v-else class="btn-bg-red" @click="UserLogin()">一键登录/注册</button>
			</template>
			<button v-else class="btn-bg-red" @click="UserLogin">一键登录</button>
			<!-- #endif -->
			<!-- #ifdef MP-ALIPAY -->
			<button :disabled="!isRead" @getAuthorize="onGetAuthorize" scope="userInfo" open-type="getAuthorize"
				size="default" class="login-btn-ali theme-btn">
				支付宝一键登录
			</button>
			<!-- #endif -->
		</view>

		<!-- 验证码登录/ 密码登录 -->

		<view style="display: flex;
			justify-content: center;
			margin-top: 48rpx;">
			<view style="margin-right: 66rpx;
			font-size: 28rpx;
			color: #666666;" @click="sendCodeLogin">验证码登录</view>
			<view style=" font-size: 28rpx;
				color: #666666;" @click="passwordLogin">密码登录</view>
		</view>


		<!-- 	<view class="no-login-btn d-c d-c-c">
			<view class="f26 gray9" @click="onNotLogin">暂不登录</view>
		</view> -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				wxPhone: false,
				loading: true,
				background: "",
				listData: [],
				userId: "",
				mobile: false,
				isRead: false,
				setting: {
					loginDesc: "",
					loginLogo: "",
					name: "",
				},
				invitationId: 0,
				noagreeUrl :'/static/login/noagree.png',
				agreeUrl:'/static/login/agree.png'
			};
		},
		onLoad(e) {
			this.invitationId = uni.getStorageSync("invitationId") ?
				uni.getStorageSync("invitationId") :
				0;
			let self = this;
			this.getCodeType();
			uni.getUserInfo({
				success: function(res) {
					// console.log(res)
					const userInfo = res.userInfo;
					console.log(userInfo);
					uni.login({
						provider: "weixin",
						success: (res) => {
							console.log("res-login", res); //获取到code
							self.code = res.code;
							// console.log('code', res.code);

							//请求登录接口
							if (res.errMsg == "login:ok") {
								var params = {
									code: self.code,
									nickname: userInfo.nickName,
									avatar: userInfo.avatarUrl,
								};
								self._postBody(
									"user/userWx/login", {
										code: self.code,
										source: "wx",
										invitationId: self.invitationId,
										refereeId: uni.getStorageSync("refereeId"),
									},
									(result) => {
										self.userId = result.data.userId;
										self.mobile = result.data.mobile;
									},
									false,
									() => {
										self.loading = false;
									}
								);
							}
						},
					});
				},
			});
		},
		onShow() {
			this.wxPhone = uni.getStorageSync("wxPhone") || 0;
			//隐藏无效的返回按钮
			//   wx.hideHomeButton({
			//     complete:()=>{
			//     }
			//   })
		},
		methods: {
			// 验证码登录
			sendCodeLogin(){
				this.gotoPage('/pages/login/codeLogin')
			},
			// 密码登录
			passwordLogin(){
				this.gotoPage('/pages/login/passLogin')
			},
			xieyi(type) {
				console.log(type)
				this.gotoPage("/pages/webview/ue?type=" + type);
			},
			getCodeType() {
				let self = this;
				self._get("index/loginSetting", {}, (res) => {
					self.setting = res.data;
				});
			},
			onNotLogin: function() {
				this.gotoPage("/pages/index/index");
			},
			UserLogin() {
				let self = this;
				if (self.loading) {
					return;
				}
				if (!self.isRead) {
					uni.showToast({
						title: "请勾选并同意《隐私政策》和《用户协议》",
						icon: "none",
					});
					return;
				}
				uni.showLoading({
					title: "正在处理",
					mask: true,
				});
				// 执行微信登录
				wx.login({
					success(res_login) {
						let url = "user/userWx/userLogin";
						let params = {
							code: res_login.code,
						};
						// 发送用户信息
						self._postBody(
							url,
							params,
							(result) => {
								// 记录token user_id
								uni.setStorageSync("token", result.data.token);
								uni.setStorageSync("userId", result.data.loginUserVo.userId);
								// 执行回调函数
								uni.navigateBack();
							},
							false,
							() => {
								uni.hideLoading();
							}
						);
					},
				});
			},
			getUserInfo: function(e) {
				let self = this;
				if (self.loading) {
					return;
				}
				if (!self.isRead) {
					uni.showToast({
						title: "请勾选并同意《隐私政策》和《用户协议》",
						icon: "none",
					});
					return;
				}
				if (e.detail.errMsg !== "getPhoneNumber:ok") {
					return false;
				}
				uni.showLoading({
					title: "正在处理",
					mask: true,
				});
				wx.login({
					success(res_login) {
						let url = "user/userWx/bindMobile";
						let params = {
							code: res_login.code,
							userId: self.userId,
							encryptedData: e.detail.encryptedData,
							iv: e.detail.iv,
						};
						// 发送用户信息
						self._post(
							url,
							params,
							(result) => {
								// 记录token user_id
								uni.setStorageSync("token", result.data.token);
								uni.setStorageSync("userId", result.data.loginUserVo.userId);
								// 执行回调函数
								uni.navigateBack();
								uni.switchTab({
									url: "/pages/user/index/index",
								});
							},
							false,
							() => {
								uni.hideLoading();
							}
						);
					},
				});

				// wx.getUserProfile({
				// 	lang: 'zh_CN',
				// 	desc: '用于完善会员资料',
				// 	success: (res) => {
				// 		if (res.errMsg !== 'getUserProfile:ok') {
				// 			return false;
				// 		}
				// 		uni.showLoading({
				// 			title: "正在登录",
				// 			mask: true
				// 		});
				// 		// 执行微信登录
				// 		uni.login({
				// 			success(res_login) {
				// 				// 发送用户信息
				// 				self._postBody('user/userWx/login', {
				// 					invitationId: self.invitationId,
				// 					code: res_login.code,
				// 					userInfo: res.rawData,
				// 					encrypted_data: encodeURIComponent(res.encryptedData),
				// 					iv: encodeURIComponent(res.iv),
				// 					signature: res.signature,
				// 					refereeId: uni.getStorageSync('refereeId')
				// 				}, result => {
				// 					// 记录token userId
				// 					uni.setStorageSync('token', result.data.token);
				// 					uni.setStorageSync('userId', result.data.loginUserVo.userId);
				// 					// 执行回调函数,没有上一页,不走回调直接跳转
				// 					// uni.navigateBack();
				//   uni.switchTab({
				//     url: '/pages/user/index/index'
				//   })
				// 				}, false, () => {
				// 					uni.hideLoading();
				// 				});
				// 			}
				// 		});
				// 	}
				// });
			},
			onGetAuthorize(res) {
				console.log("开始授权");
				let self = this;
				uni.login({
					provider: "alipay",
					success: function(loginRes) {
						console.log("sucss");
						uni.getUserInfo({
							provider: "alipay",
							success: function(infoRes) {
								self.aliPayLogin(loginRes, infoRes);
							},
						});
					},
					fail(err) {
						console.log(err);
					},
				});
			},
			aliPayLogin(loginRes, infoRes) {
				let self = this;
				console.log(loginRes); // 获取用户信息
				console.log(infoRes);
				uni.showLoading({
					title: "登录中",
					mask: true,
				});
				self._post(
					"user/useralipay/login", {
						code: loginRes.code,
						avatar: infoRes.avatar,
						nickName: infoRes.nickName,
					},
					(result) => {
						// 记录token user_id
						console.log(result.data.token);
						uni.setStorageSync("token", result.data.token);
						uni.setStorageSync("userId", result.data.loginUserVo.userId);

						// 执行回调函数
						self.gotoPage("/pages/index/index", "redirect");
					},
					false,
					() => {
						self.gotoPage("/pages/index/index", "redirect");
					}
				);
			},
		},
	};
</script>

<style lang="scss">
	page {
		background-color: #fff;

	}


	.blur-bg {
		/* 背景层绝对定位 */
		position: absolute;

		left: -312rpx;
		top: -210rpx;
		width: 1028rpx;
		height: 1440rpx;
		background: rgba(255, 36, 66, 0.22);
		border-radius: 0rpx 0rpx 0rpx 0rpx;
		/* 高斯模糊效果 */
		filter: blur(228.1999969482422px);

		/* 解决模糊边缘问题 */
		transform: scale(1.1);
		z-index: -10; // 层级
	}

	.line-red {
		width: 88rpx;
		height: 20rpx;
		background: #FF2442;
		border-radius: 20rpx 20rpx 20rpx 20rpx;
		margin-left: 40rpx;
		margin-top: -16rpx;
	}

	.xieyi-left-right {
		color: #FF2442;
		margin: 0 10rpx 0 10rpx;
	}

	.btn-bg-red {
		border: 1rpx solid;
		border-color: #FF2442;
		background-color: #FF2442;
		color: #ffffff;
		font-weight: $uni-img-size-sm;
	}


	.login-container {
		padding: 30rpx;
	}

	.wechatapp {
		padding: 120rpx 0 48rpx;
		margin-bottom: 72rpx;
		text-align: center;

		.logo-image {
			margin: 0 auto;
			margin-bottom: 20rpx;
			width: 145rpx;
			height: 145rpx;
			border-radius: 50%;
		}
	}

	.m-0-a {
		margin: 0 auto;
	}

	.wechatapp .header {
		width: 190rpx;
		height: 190rpx;
		border: 2px solid #fff;
		margin: 0rpx auto 0;
		border-radius: 50%;
		overflow: hidden;
		box-shadow: 1px 0px 5px rgba(50, 50, 50, 0.3);
	}

	.auth-title {
		color: #333333;
		font-size: 30rpx;
		margin-top: 170rpx;
		margin-bottom: 85rpx;
		text-align: center;
	}

	.auth-subtitle {
		color: #777;
		margin-bottom: 20rpx;
		font-size: 22rpx;
		text-align: center;
	}

	.login-btn {
		// padding: 0 20rpx;
		// margin-left: 30rpx;
		// margin-right: 30rpx;
	}

	.login-btn button {
		// width: 592rpx;

		height: 112rpx;
		border-radius: 56rpx;
		font-size: 30rpx;
		text-align: center;
		line-height: 112rpx;
	}

	.login-btn button.login-btn-ali {
		height: 112rpx;
		line-height: 112rpx;
		background: #1678ff;
		color: #fff;
		font-size: 30rpx;
		border-radius: 999rpx;
		text-align: center;
	}

	.no-login-btn {
		position: fixed;
		bottom: 220rpx;
		left: 0;
		width: 100%;
	}

	
</style>